import React from 'react'
import { connect } from 'react-redux'
import ProgramBinaryTreeBox from './program-binary-tree-box'
import { getDiffPrograms } from '../../actions/diff'
import TreeView from './tree-view'
import { Divider, Icon } from 'antd'

class DiffProgramBody extends React.Component {
  state = {
    programId: 0,
    diffProgramId: 0
  }

  componentDidMount = () => {
    const {programId} = this.props.match.params
    this.setState({programId})
    this.props.getDiffPrograms(programId, diffPrograms => {
      console.log(diffPrograms)
      if (diffPrograms.length === 1) {
        this.props.history.push(`/programs/${programId}/history`)
      }
    })
  }

  render () {
    const {diffPrograms} = this.props
    const {programId, diffProgramId} = this.state

    return <div>
      <a onClick={() => this.props.history.goBack()}>
        <Icon type="arrow-left"/> 返回
      </a>
      <Divider type='vertical'/> 训练营 Diff

      <Divider/>
      <div>
        {
          diffPrograms.length > 0
            ? <ProgramBinaryTreeBox
              diffPrograms={diffPrograms}
              sourceProgramId={programId}
              diffProgramId={diffProgramId}
              updateDiffProgramId={diffProgramId => this.setState({diffProgramId})}
            />
            : ''
        }
      </div>
      <div style={{
        position: 'absolute', right: '5%', top: '30%', width: '50%'
      }}>
        <TreeView
          diffPrograms={diffPrograms}
          sourceProgramId={programId}
          diffProgramId={diffProgramId}
        />
      </div>

    </div>
  }
}

const mapStateToProps = ({diffPrograms}) => ({diffPrograms})
const mapDispatchToProps = dispatch => ({
  getDiffPrograms: (programId, callback) => dispatch(getDiffPrograms(programId, callback))
})
export default connect(mapStateToProps, mapDispatchToProps)(DiffProgramBody)